HarmonyOS Developer 常见组件开发指导 |
您所在的位置：网站首页 › image center下载 › HarmonyOS Developer 常见组件开发指导 |
HarmonyOS Developer 常见组件开发指导
|
button开发指导
button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。具体用法请参考button API。 创建button组件 在pages/index目录下的hml文件中创建一个button组件。
/* xxx.css */ .container { width: 100%; height: 100%; flex-direction: column; justify-content: center; align-items: center; background-color: #F1F3F5; }
通过设置button的type属性来选择按钮类型，如定义button为圆形按钮、文本按钮等。 + button /* xxx.css */ .container { width: 100%; height: 100%; background-color: #F1F3F5; flex-direction: column; align-items: center; justify-content: center; } .circle { font-size: 120px; background-color: blue; radius: 72px; } .text { margin-top: 30px; text-color: white; font-size: 30px; font-style: normal; background-color: blue; width: 50%; height: 100px; }
说明 button组件使用的icon图标如果来自云端路径，需要添加网络访问权限 ohos.permission.INTERNET。 如果需要添加ohos.permission.INTERNET权限，则在resources文件夹下的config.json文件里进行权限配置。 "module": { "reqPermissions": [{ "name": "ohos.permission.INTERNET" }], }显示下载进度 为button组件添加progress方法，来实时显示下载进度条的进度。 {{downloadText}} /* xxx.css */ .container { width: 100%; height: 100%; background-color: #F1F3F5; flex-direction: column; align-items: center; justify-content: center; } .download { width: 280px; text-color: white; background-color: #007dff; } // xxx.js import promptAction from '@ohos.promptAction'; export default { data: { percent: 0, downloadText: "Download", isPaused: true, intervalId : null, }, start(){ this.intervalId = setInterval(()=>{ if(this.percent picker /* xxx.css */ .container { width: 100%; height: 100%; flex-direction: column; justify-content: center; align-items: center; background-color: #F1F3F5; }
通过设置picker的type属性来选择滑动选择器类型，如定义picker为日期选择器。
/* xxx.css */ .container { width: 100%; height: 100%; flex-direction: column; justify-content: center; align-items: center; background-color: #F1F3F5; } .pickertext{ margin-bottom: 30px; } // xxx.js export default { data: { rangetext:['15', "20", "25"], textvalue:'Select text', datevalue:'Select date', } }
说明
普通选择器设置取值范围时，需要使用数据绑定的方式。 设置时间展现格式picker的hours属性定义时间的展现格式，可选类型有12小时制和24小时制。
/* xxx.css */ .container { width: 100%; height: 100%; flex-direction: column; justify-content: center; align-items: center; background-color: #F1F3F5; } .pickertime { margin-bottom:50px; width: 300px; height: 50px; }
说明 hours属性为12：按照12小时制显示，用上午和下午进行区分；hours属性为24：按照24小时制显示。添加响应事件 对picker添加change和cancel事件，来对选择的内容进行确定和取消。
/* xxx.css */ .container { width: 100%; height: 100%; flex-direction: column; justify-content: center; align-items: center; background-color: #F1F3F5; } .pickermuitl { margin-bottom:20px; width: 600px; height: 50px; font-size: 25px; letter-spacing:15px; } // xxx.js import promptAction from '@ohos.promptAction'; export default { data: { multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"]], multitextvalue:'Select multi-line text', multitextselect:[0,0,0], }, multitextonchange(e) { this.multitextvalue=e.newValue; promptAction.showToast({ message:"Multi-column text changed to:" + e.newValue }) }, multitextoncancel() { promptAction.showToast({ message:"multitextoncancel" }) }, }
在本场景中，开发者可以自定义填写当前的健康情况来进行打卡。 Health check-in Office: Office hours: Having fever or cold symptoms Close contact with someone with COVID-19 /* xxx.css */ .doc-page { flex-direction: column; background-color: #F1F3F5; } .title { margin-top: 30px; margin-bottom: 30px; margin-left: 50px; font-weight: bold; color: #0000ff; font-size: 38px; } .out-container { flex-direction: column; align-items: center; } .pick { width: 80%; height: 76px; border: 1px solid #0000ff; border-radius: 20px; padding-left: 12px; } .txt { width: 80%; font-size: 18px; text-align: left; margin-bottom: 12px; margin-left: 12px; } .dvd { margin-top: 30px; margin-bottom: 30px; margin-left: 80px; margin-right: 80px; color: #6495ED; stroke-width: 6px; } // xxx.js import prompt from '@ohos.promptAction' export default { data: { yorn1:'No', yorn2:'No', pos:'Home', yesno:['Yes', 'No'], posarr:['Home', 'Company'], datevalue:'Select time', datetimeselect:'2012-5-6-11-25', dateselect:'2021-9-17', showbuild:true }, onInit() { }, isFever(e) { this.yorn1 = e.newValue }, isTouch(e) { this.yorn2 = e.newValue }, setPos(e) { this.pos = e.newValue if (e.newValue === 'Non-research center') { this.showbuild = false } else { this.showbuild = true } }, setbuild(e) { this.build = e.newValue }, dateonchange(e) { e.month=e.month+1; this.datevalue = e.year + "-" + e.month + "-" + e.day; promptAction.showToast({ message:"date:"+e.year+"-"+e.month+"-"+e.day }) }, showtoast() { promptAction.showToast({ message: 'Submitted.', duration: 2000, gravity: 'center' }) } }
image开发指导
image是图片组件，用来渲染展示图片。具体用法请参考image API。 创建image组件 在pages/index目录下的hml文件中创建一个image组件。
/* xxx.css */ .container { width: 100%; height: 100%; flex-direction: column; justify-content: center; align-items: center; background-color: #F1F3F5; }
通过设置width、height和object-fit属性定义图片的宽、高和缩放样式。
/* xxx.css */ .container { width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; background-color:#F1F3F5; } image{ width: 80%; height: 500px; border: 5px solid saddlebrown; border-radius: 20px; object-fit: contain; match-text-direction:true; }
图片成功加载时触发complete事件，返回加载的图源尺寸。加载失败则触发error事件，打印图片加载失败。
/* xxx.css */ .container{ width: 100%; height: 100%; flex-direction: column; justify-content: center; align-self: center; background-color: #F1F3F5; } .container div{ margin-left: 10%; width: 80%; height: 300px; margin-bottom: 40px; } // index.js import promptAction from '@ohos.promptAction'; export default { imageComplete(i,e){ promptAction.showToast({ message: "image "+i+"'s width"+ e.width+"----image "+i+"'s height"+e.height, duration: 3000, }) }, imageError(i,e){ setTimeout(()=>{ promptAction.showToast({ message: "Failed to load image "+i+".", duration: 3000, }) },3000) } }
在本场景中，开发者长按图片后将慢慢隐藏图片，当完全隐藏后再重新显示原始图片。定时器setInterval每隔一段时间改变图片透明度,实现慢慢隐藏的效果，当透明度为0时清除定时器，设置透明度为1。 Touch and hold the image /* xxx.css */ .page-container { width: 100%; height: 100%; flex-direction:column; align-self: center; justify-content: center; background-color:#F1F3F5; background-color: #F1F3F5; } .content{ flex-direction:column; } .image-container { width: 100%; height: 300px; align-items: center; justify-content: center; } .text-container { margin-top:50px; width: 100%; height: 60px; flex-direction: row; justify-content: space-between; } .testimage { width: 100%; height: 400px; object-fit: scale-down; border-radius: 20px; } // index.js import promptAction from '@ohos.promptAction'; export default { data: { testuri: 'common/images/bg-tv.jpg', imageopacity:1, timer: null }, changeopacity: function () { promptAction.showToast({ message: 'Touch and hold the image.' }) var opval = this.imageopacity * 20 clearInterval(this.timer); this.timer = setInterval(()=>{ opval--; this.imageopacity = opval / 20 if (opval===0) { clearInterval(this.timer) this.imageopacity = 1 } },100); } }
文章转载自：https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/ui-js-components-images-0000001478061537-V3?catalogVersion=V3 |
【本文地址】
今日新闻 |
推荐新闻 |